<script setup>
import {ref, onMounted} from 'vue';
import {Map, View} from 'ol'
import TileLayer from 'ol/layer/Tile'
import XYZ from "ol/source/XYZ";
import {defaults as defaultControl, OverviewMap} from 'ol/control'
const map = ref(null);

const overViewCtl = ()=>{
  const overViewMap = new OverviewMap({
    //鹰眼控件样式（see in overviewmap-custom.html to see the custom CSS used）
    className: 'ol-overviewmap ol-custom-overviewmap',
    layers: [
        new TileLayer({
          source: new XYZ({
            url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69",
          }),
        })
    ],
    //当前的鹰眼图会跟随当前的视图旋转
    rotateWithView:true,
    collapseLabel: '\u00BB',
    //鹰眼控件折叠时功能按钮上的标识
    label: '\u00AB',
    //初始为展开显示方式
    collapsed: true,
  })
  map.value.addControl(overViewMap)

}

const initMap = ()=>{
  map.value = new Map({
    target: 'map',
    layers: [
        new TileLayer({
          source: new XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69"}),
          name: '位置控制图',
        }),
    ],
    controls: defaultControl({
      zoom: false
    }),
    //配置视图
    view: new View({
      center: [113.24981689453125, 23.126468438108688], //视图中心位置
      projection: "EPSG:4326", //指定投影
      zoom: 12,  //缩放到的级别

    })
  })
  overViewCtl();
}

onMounted(initMap)
</script>

<template>
  <div id="map">
  </div>
</template>

<style scoped>
#map{
  width: 100%;
  height: 100%;
  position: relative;
}

/*=S 自定义鹰眼样式 */
#map>>>.ol-custom-overviewmap, .ol-custom-overviewmap {
  width: 152px;
  height: 152px;
}
/* 鹰眼控件中地图容器样式 */
#map>>>.ol-custom-overviewmap .ol-overviewmap-map {
  border: none;
}
/* 鹰眼控件中显示当前窗口中主图区域的边框 */
#map>>>.ol-custom-overviewmap .ol-overviewmap-box {
  border: 2px solid red;
}
/* 鹰眼控件展开时其控件按钮图标的样式 */
#map>>>.ol-custom-overviewmap:not(.ol-collapsed) button {
  right: 2px;
  top: 2px;
}

</style>